<!--
 * @Author: monet hanxu@huaun.com
 * @Date: 2023-09-17 00:05:39
 * @LastEditors: zhangyonggui
 * @LastEditTime: 2023-10-23 16:31:45
 * @FilePath: /h-radar-expose/components/AssessmentBlock.vue
 * @Description:
-->
<template>
  <el-row v-if="blockList.length" class="block">
    <el-col
      v-for="(item, index) in blockList"
      :key="index"
      :span="blockNum || cloSpan"
      class="row-container"
    >
      <div class="assets-block-container">
        <div class="block-title">
          <img src="@/static/images/icon/bar.png" class="bar" />
          <span>{{ item.title }}</span>
        </div>
        <el-row
          v-if="item.list.length"
          class="assets-block-body"
          type="flex"
          align="middle"
        >
          <el-col :span="8" class="assets-block-img">
            <img :src="item.img" alt="" />
            <p :class="item.tag">
              {{ item.tip }}
            </p>
          </el-col>
          <el-col :span="16">
            <el-row :gutter="24" class="assets-block-list">
              <el-col v-for="(el, i) in item.list" :key="i" :span="12">
                <div class="list-item">
                  <i
                    :class="el.icon ? 'vul-icon-success-a' : 'vul-icon-close-a'"
                  ></i>
                  <el-tooltip
                    effect="dark"
                    :content="el.name"
                    placement="bottom"
                  >
                    <span>{{ el.name }}</span>
                  </el-tooltip>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <noData v-else class="no-data"></noData>
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import {defineProps,computed} from 'vue';
const props=defineProps({
  blockNum: {
      type: Number,
      default() {
        return 0
      },
    },
    blockList: {
      type: Array as any,
      default() {
        return []
      },
    },
})
  const cloSpan=computed(()=>{
    return Math.floor(24 / props.blockList.length)
  })
  
</script>

<style lang="scss" scoped>
.row-container {
  &:not(:last-child) .assets-block-body {
    border-right: 2px solid $-v-color-border-light;
  }
  &:not(:first-child) .block-title {
    margin-left: $-v-spacing-vertical-base;
  }
}
.assets-block-container {
  .block-title {
    margin-bottom: $-v-spacing-horizontal-base;
  }

  .assets-block-body {
    padding: 0 $-v-spacing-vertical-base;

    &:not(:last-child) {
      border-right: 2px solid $-v-color-border-light;
    }
    .assets-block-img {
      @include flexBox($flexDirection: column);

      p {
        font-weight: $-v-font-weight-primary;
      }
    }

    .assets-block-list {
      .el-col:not(:nth-child(1)):not(:nth-child(2)) {
        margin-top: $-v-spacing-horizontal-small;
      }

      .list-item {
        flex: 1;
        @include ellipsis;
      }
    }

    .vul-icon-success-a {
      color: map-get($colors, success);
    }

    [class^='vul-icon-'] {
      margin-right: $-v-spacing-vertical-icon;
    }
  }
}
</style>
